scale3d

Bottom;-ms-transform-origin:Center Bottom;-o-transform-origin:Center Bottom;Transform-origin:Center Bottom;-webkit-transition:All 0.3s;-moz-transition:All 0.3s;-ms-transition:All 0.3s;-o-transition:All 0.3s;transition:All 0.3s;I {-webkit-transform:translate3d (0, 20px, 0);-moz-transform:translate3d (0, 20px, 0);-ms-transform:translate3d (0, 20px, 0);-o-transform:translate3d (0, 20px, 0);Transform:translate3d (0, 20px, 0);-webkit-transition:All 0.3s;-moz-transition:All 0.3s;-ms-transition:All 0.

matrix. Compared with the six parameters of the 2d matrix martrix (), the 3d matrix matrix3d has 12 parameters. The deformation rules are similar to those of 2 dmatrix (), but they are changed from 3*3 matrix to 4*4 matrix. matrix3d(a,b,c,0,d,e,f,0,g,h,i,0,j,k,l,1) 3d displacement 3d displacement functions mainly include traslateZ () and translate3d () Translate3d (x, y, z) [Note] x and y can be length values or percentages. Percentages are the width of the horizontal direction of the element a

font-size: 30px; 87 color: # 47c9af; 88 opacity: 0; 89 transition: 0.3 s; 90} 91. tooltip-effect-1. tooltip-content {92/* 93 translate3d (0, 10px, 0): elements move down 10px along the Y axis; 94 rotate3d (, 1, 45deg): elements are on the X axis, Y axis and Z axis rotate 45 °; 95 transform-origin: 50% 100%; the element is the center point calculated by itself; 96 */97 transform: translate3d (0, 10px, 0) rotate3d (50%, 1, 45deg); 98 transform-origin: 100% 100; 99. tooltip-effect-1. tooltip-conte

Translate3d (x, Y, z) Translate elements in 3D mode, set X, Y, and Z axes Translatez (z) Set the z-axis of the translation element in 3D mode Scale3d (x, Y, z) 3D way to scale an element Scalez (z) Set the z-axis of a 3D-mode scale element Rotate3d (X,y,z,a) Rotate elements in 3d mode Rotatex (a) Sets the X, Y, and z axes of the rotated e

variants include functions such as:,,,,,, rotateX() rotateY() rotate3d() translateZ() translate3d() scaleZ() and scale3d() . The CSS3 3D deformation also includes a matrix matrix3d() function, which includes 16 parameters. transform-originproperty to specify where the center point of the element is. A third number transform-origin-z is added to control the center point of the element's three-dimensional space. perspectiveProperty relative to

decimal value between 0 and 1, rotate() and skew() two functions accept a radial unit of measure value deg . In addition rotate() to functions, each function accepts parameters for the X-and Y-axes. There are functions available in CSS3 variants X /Y : translateX() ,,, translateY() scaleX() scaleY() ,, skewX() and skewY() . There is also a matrix function in the three-in-one deformation matrix() , which includes six parameters. CSS3 3D variants include functions such as:,,,, rotateX() rot

. Input: x. Rotate3d (axis3d (30), 30) Object. Rotate3dX (Object) Description: it rotates counter-clockwise relative to the X axis. Input: x. Rotate3dX (30) Object. Rotate3dY (Object) Description: it rotates counter-clockwise relative to the Y axis. Input: x. Rotate3dY (30) Object. Rotate3dZ (Object) Description: it rotates counter-clockwise relative to the Z axis. Input: x. Rotate3dZ (30) Object. RotateAt (Object o, Object) Note: The relative point O is rotated counter-clockwise. Input: x.

,rotate3d (250px,250px, 250px,-Scale3d (0.5);} However, in some cases, we do not need to apply the effect of 3D transformations to elements. At this point we can turn on hardware acceleration using a little trick of "spoofing" the browser.While we may not want to apply 3D transformations to elements, we can turn on the 3D engine as well. For example we can use Transform:translatez (0); To turn on hardware acceleration.. Cube{-webkit-transfor

CSS3Transform PropertyGrammar:transform:none|transform-functions; value Description None The definition does not convert. Matrix (n,n,n,n,n,n) Defines a 2D conversion, using a matrix of six values. Matrix3D (n,n,N,n,n,n,n, n ,n,n,N,n,n,N,n,n ) Defines a 3D conversion, using a 4x4 matrix of 16 values. Translate (x,y) Defines a 2D transformation. Translate3d (x,y,z) Defines a 3D transf

Transform Static properties, once written into the style, will immediately display the function without any change in process. (similar to left, right, top, bottom such attributes) Mainly used to make the deformation of the elements There are five main properties that change the style of an element: Translate3d (x, Y, z) controls where elements are positioned on the three axes of a page Rotate (10deg) is used to control the angle of rotation of the element (degr

Matrix3D (n,n,N,n,n,n,n, n ,n,n,N,n,n,N,n,n ) Defines a 3D conversion, using a 4x4 matrix of 16 values. Translate (x,y) Defines a 2D transformation. Test Translate3d (x,y,z) Defines a 3D transformation. TranslateX (x) Define the conversion, just with the value of the X-axis. Test Translatey (y) Define the conversion, just use the Y-axis value. Test Translatez (

Example Tutorial: Mainly through a 3D cube effect example to in-depth understanding of the CSS3 transform properties, the following is a screenshot of the example, coupled with animation can also rotate Yo, is it cool? Put on a picture of the girl you like, you can be bold sister, haha! First knowledge of transform As the name suggests: transform. Can think of it can do a lot of things, this attribute has a lot of values, here simply enumerate: Translate (x,y), Translatex (x), Translatey

CSS3 series has been learning for some time, the first article wrote some CSS3 Chine, the original stamp here, but also obtained more support from netizens, in this thank you, your support is I write the article the biggest power ^_^.Then this article, mainly through a 3D cube effect example to in-depth understanding of the CSS3 transform properties, the following is a screenshot of this example, coupled with animation can rotate Yo, is it cool? Put on a picture of the girl you like, and you can

the GPU; Create layout, and cache. -webkit-backfface-visibility:hidden; Common attributes are as follows: Translatez, Perspective, backface-visibility, ScaleZ, RotateZ, RotateX , Rotatey, Translate3d, Scale3d, Rotate3d3) using GPU acceleration for reasonable use, GPU acceleration, is actually leveraging the GPU layer cache to make the rendering resources reusable. b), GPU acceleration is a double-edged sword, too many GPU layers will also bring perf

uses values for Y axis. TranslateZ (z) Defines 3D conversion. Only values used for the Z axis are used. Scale3d (x, y, z) Defines 3D scaling and conversion. ScaleX (x) Defines 3D scaling conversion by specifying an X axis value. ScaleY (y) Defines 3D scaling conversion by specifying a value for the Y axis. ScaleZ (z) Defines 3D scaling conversion by specifying the value of a Z axis.

to the 2D transformation function. 3D transformation in CSS3 mainly includes the following functions: 3D displacement: 3D displacement in CSS3 mainly includes translateZ () and translate3d () functions; 3D Rotation: 3D Rotation in CSS3 mainly includes four functions: rotateX (), rotateY (), rotateZ (), and rotate3d (). 3D Scaling: 3D scaling in CSS3 mainly includes scaleZ () and scale3d (). 3D matrix: In CSS3, 3D deformation is the same as 2D deforma

can operate on element variants either through a formulated function or through a three-dimensional matrix: When we specify a container's transform-style attribute value as a preserve-3d, the descendant element of the container has a 3D effect, which is a little abstract, that is, after the current parent container sets the preserve-3d value, its child element can be relative to the plane where the parent element is located, perform 3D deformation. 3D displacement operations are performed usi

(), ScaleY (), ScaleY () to perform 3D scaling operations, can also be combined into Scale3d (number,number,number) this notation;3, the use of Rotatex (angle), Rotatey (angle), Rotatez (angle) for 3D rotation, can also be combined into Rotate3d (xangle,yangle,zangle) this notation.For the API learning, I suggest to go to the source to see, not satisfied with the consumption of others summary, Transform-style API.Here to specifically put forward, 3D

operations, can also be combined into Scale3d (number,number,number) this notation;3, the use of Rotatex (angle), Rotatey (angle), Rotatez (angle) for 3D rotation, can also be combined into Rotate3d (xangle,yangle,zangle) this notation.For the API learning, I suggest to go to the source to see, not satisfied with the consumption of others summary, Transform-style API.Here to specifically put forward, 3D axis, so-called around the X, Y, Z axis Three a

Translate3d,Translate3dX,Translate3dY,Scale3d,ScaleZ,Rotate3d3D transformation can be achieved. TransitionThe attribute allows the CSS attribute value to smoothly transition within a certain period of time.This effect can be triggered by mouse clicking, getting focus, being clicked, or any changes to the element.Start to support. Transition: Attribute duration conversion effect delay timeTransition-property: All | none | specified attributeTransitio